<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>权益详情 - 每月免费基础洗头</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        success: '#22C55E',
                        danger: '#EF4444',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .record-item {
                transition: all 0.2s ease;
            }
            .record-item:hover {
                background-color: #F9F9F9;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 flex justify-between items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-10 border-b border-lightgray">
            <a href="member-benefits.html" class="text-dark">
                <i class="fa fa-arrow-left text-lg"></i>
            </a>
            <div class="text-lg font-bold">权益详情</div>
            <div class="w-6"></div> <!-- 占位元素，使标题居中 -->
        </header>

        <!-- 主内容区 -->
        <main class="pt-16 pb-16">
            <!-- 权益基本信息 -->
            <div class="bg-gradient-to-r from-primary to-teal-400 text-white p-5">
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center text-white flex-shrink-0">
                        <i class="fa fa-tint text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h2 class="text-xl font-bold">每月免费基础洗头</h2>
                        <p class="text-sm mt-1 opacity-90">钻石会员专享权益</p>
                    </div>
                </div>
            </div>
            
            <!-- 权益使用情况 -->
            <div class="bg-white p-5 mt-3">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-medium">使用情况</h3>
                    <span class="text-sm text-primary">本月剩余: 2/4次</span>
                </div>
                
                <div class="progress-bar mb-1">
                    <div class="progress-value" style="width: 50%"></div>
                </div>
                <div class="flex justify-between text-xs text-gray">
                    <span>已使用2次</span>
                    <span>共4次/月</span>
                </div>
            </div>
            
            <!-- 权益详情说明 -->
            <div class="bg-white p-5 mt-3">
                <h3 class="font-medium mb-3">权益详情</h3>
                
                <div class="space-y-3 text-sm">
                    <div class="flex">
                        <span class="text-gray w-20">权益内容:</span>
                        <span>每月可免费享受4次基础洗头服务，包含智能水温调节、穴位按摩和自动冲洗</span>
                    </div>
                    
                    <div class="flex">
                        <span class="text-gray w-20">有效期:</span>
                        <span>2024-05-01 至 2024-12-31（每月重置次数）</span>
                    </div>
                    
                    <div class="flex">
                        <span class="text-gray w-20">适用门店:</span>
                        <span>所有智能洗护中心门店通用</span>
                    </div>
                    
                    <div class="flex">
                        <span class="text-gray w-20">使用方式:</span>
                        <span>预约时选择"基础洗头"服务，系统将自动抵扣免费次数</span>
                    </div>
                    
                    <div class="flex">
                        <span class="text-gray w-20">注意事项:</span>
                        <span>当月次数未使用完不累计至下月，节假日通用</span>
                    </div>
                </div>
                
                <button class="mt-5 w-full py-3 bg-primary text-white rounded-lg font-medium">
                    <i class="fa fa-calendar-check-o mr-2"></i>立即预约使用
                </button>
            </div>
            
            <!-- 使用记录 -->
            <div class="bg-white p-5 mt-3">
                <h3 class="font-medium mb-3">使用记录</h3>
                
                <div class="divide-y divide-lightgray">
                    <!-- 记录1 -->
                    <div class="record-item py-3">
                        <div class="flex justify-between">
                            <span class="text-sm">智能洗护中心(北京路店)</span>
                            <span class="text-xs text-success">已使用</span>
                        </div>
                        <div class="flex justify-between mt-2 text-xs text-gray">
                            <span>2024-05-12 15:30</span>
                            <span>基础洗头服务</span>
                        </div>
                    </div>
                    
                    <!-- 记录2 -->
                    <div class="record-item py-3">
                        <div class="flex justify-between">
                            <span class="text-sm">智能洗护中心(天河店)</span>
                            <span class="text-xs text-success">已使用</span>
                        </div>
                        <div class="flex justify-between mt-2 text-xs text-gray">
                            <span>2024-05-05 10:15</span>
                            <span>基础洗头服务</span>
                        </div>
                    </div>
                    
                    <!-- 记录3 -->
                    <div class="record-item py-3">
                        <div class="flex justify-between">
                            <span class="text-sm">智能洗护中心(海珠店)</span>
                            <span class="text-xs text-success">已使用</span>
                        </div>
                        <div class="flex justify-between mt-2 text-xs text-gray">
                            <span>2024-04-28 16:45</span>
                            <span>基础洗头服务</span>
                        </div>
                    </div>
                    
                    <!-- 记录4 -->
                    <div class="record-item py-3">
                        <div class="flex justify-between">
                            <span class="text-sm">智能洗护中心(珠江新城店)</span>
                            <span class="text-xs text-success">已使用</span>
                        </div>
                        <div class="flex justify-between mt-2 text-xs text-gray">
                            <span>2024-04-15 09:30</span>
                            <span>基础洗头服务</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部导航 -->
        <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-2 px-8">
            <div class="flex justify-between">
                <a href="index.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="store-list.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-map-marker text-lg"></i>
                    <span class="text-xs mt-1">门店</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-calendar text-lg"></i>
                    <span class="text-xs mt-1">预约</span>
                </a>
                <a href="my-page.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>
    </div>
</body>
</html>
    